<template>
  <div class="container">
    <view class="fz18 bold">工作认证</view>
    <view class="fz12 intro">已有超120万用户通过学历认证，打造真实、靠谱、安全优
      质的交友平台。
    </view>

    <view class="cell flex alignCenter justifyBetween">
      <view class="label">认证方式</view>

    </view>
    <view class="cell flex alignCenter">
      <view class="label">公司名称</view>
      <uv-input placeholder="输入完整公司名，可屏蔽同事" border="none" v-model="value"></uv-input>
    </view>
    <view class="cell flex alignCenter">
      <view class="label">对外展示</view>
      <uv-input placeholder="（选填）如鹅厂/某医院/政府部门" border="none" v-model="value"></uv-input>
    </view>
    <view class="desc">若有别名则会对外展示，无则显示公司名称，请保持二者意思
      相近，否则审核人员会做出相应修改。</view>

    <view class="upload">
      <view class="box">
        <view class="image" @click="proxy.$auth.previewImage([demoImage],0)">
          <image :src="demoImage" mode="aspectFill" />
        </view>
        <view class="fz12 tips">需漏出参保公司和您的姓名</view>
      </view>
      <view class="box">
        <view class="image">
          <view class="plus">
            <uv-icon name="plus" size="25"></uv-icon>
          </view>
        </view>
        <view class="fz12 tips">点击上传</view>
      </view>
    </view>

    <view class="actionBtn">
      <uv-button text="立即认证" color="#9E06FF" shape="circle"></uv-button>
    </view>

    <view class="customerService flex alignCenter justifyCenter">
      <uv-icon name="server-man" color="#9E06FF" size="18"></uv-icon>
      <text class="fz12">联系客服</text>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();

let demoImage =
  "https://oss.seenlove.com/images/8a5840e4a980c1d054fddf879b716877.jpeg";
</script>



<style lang="scss" scoped>
.container {
  padding: 15px;
  .intro {
    margin: 7px 0 60px;
  }
  .cell {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 15px;
    .label {
      font-size: 14px;
      font-weight: bold;
      margin-right: 15px;
    }
  }
  .desc {
    color: #999;
    font-size: 12px;
    margin-bottom: 13px;
  }
  .upload {
    display: flex;
    justify-content: space-between;
    .box {
      border: 1px solid #979797;
      border-radius: 8px;
      background-color: #d8d8d8;
      padding: 7px;
      width: calc((100% - 40px) / 2);
      text-align: center;
      .image {
        width: 100%;
        height: 90px;
        background-color: white;
        border-radius: 5px;
        position: relative;
        image {
          height: 100%;
          display: block;
        }
        .plus {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .tips {
        margin-top: 7px;
      }
    }
  }

  .actionBtn {
    width: 70%;
    margin: 60px auto 50px;
  }

  .customerService {
    color: #9e06ff;
    text {
      margin-left: 6px;
    }
  }
}
</style>





